<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Xpert AI</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="theme-color" content="#f5f5f5" />
    <!-- <meta http-equiv="Cache-Control" content="max-age=0, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" /> -->
    <link rel="icon" type="image/png" href="./assets/logo.png" />
    <link rel="apple-touch-icon" href="./assets/images/apple-touch-icon.png" />
    <link href="./assets/fonts/noto-serif-sc/all.css" rel="stylesheet" />
    <!-- <script src="./assets/pace/pace.min.js"></script> -->
    <link rel="manifest" href="manifest.webmanifest" />

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
  </head>
  <body class="ngm-theme-light light"
    style="font-family: Lato, 'Noto Serif SC', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">
    <pac-root>
      <style>
        .pace {
          position: absolute;
          top: 0;
          width: 100%;
          -webkit-pointer-events: none;
          pointer-events: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
        }
        .pace-inactive {
          display: none;
        }
        .pace .pace-progress {
          background: #29d;
          position: fixed;
          z-index: 2000;
          top: 0;
          right: 100%;
          width: 100%;
          height: 2px;
        }
      </style>

      <div class="emoji-loader app-loader">
        <!-- <div class="app-loader">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
          </div> -->
      </div>
    </pac-root>

    <style>
      @media (prefers-color-scheme: dark) {
        .app-loader, html, body {
          background-color: #16181c;
        }
      }
      @media (prefers-color-scheme: light) {
        .app-loader, html, body {
          background-color: #f5f5f5;
        }
      }
      html, body {
        height: 100%;
      }
      body {
        display: flex;
        justify-content: center;
      }
      pac-root {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .app-loader {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: auto;
      }

      .emoji-loader::before {
        position: absolute;
        width: 1em;
        height: 1em;
        left: 50%;
        top: 50%;
        font-size: 3rem;
        text-align: center;
        transform: translate(-50%, -50%);
        content: '' '🕛';
        animation: emoji-loader 1.2s steps(12) infinite forwards 0s;
      }

      @keyframes emoji-loader {
        0% {
          content: '🕐';
        }
        8.3% {
          content: '🕑';
        }
        16.6% {
          content: '🕒';
        }
        24.9% {
          content: '🕓';
        }
        33.2% {
          content: '🕔';
        }
        41.5% {
          content: '🕕';
        }
        49.8% {
          content: '🕖';
        }
        58.1% {
          content: '🕗';
        }
        66.4% {
          content: '🕘';
        }
        74.7% {
          content: '🕙';
        }
        83.0% {
          content: '🕚';
        }
        92.3% {
          content: '🕛';
        }
        100% {
          content: '🕐';
        }
      }
    </style>
    <noscript>Please enable JavaScript to continue using this application.</noscript>
  </body>
</html>
